<template>
    <div class="role-management">
        <div class="header">
            <el-form :model="searchForm" :inline="true">
                <el-form-item label="所属组织">
                    <el-select v-model="searchForm.organization" placeholder="请选择组织" clearable class="search-input">
                        <el-option v-for="item in organizationOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="searchForm.role" placeholder="请选择角色" clearable class="search-input">
                        <el-option v-for="item in roleOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="searchForm.name" placeholder="请输入姓名" clearable class="search-input" />
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSearch">查询</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="cont">
            <el-table :data="userList" border style="width: 100%" stripe>
                <el-table-column prop="account" label="账号" />
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="role" label="角色" />
                <el-table-column prop="organization" label="所属组织" />
                <el-table-column prop="orgLevel" label="组织级别" />
                <el-table-column prop="phone" label="联系电话" />
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <Pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
            :total="pagination.total" @size-change="handleSizeChange" @current-change="handlePageChange" />
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Pagination from '@/components/Pagination.vue';

// 组织选项
const organizationOptions = ref([
    { value: '1', label: '陕西煤业集团' },
    { value: '2', label: '陕西分公司' },
    { value: '3', label: '西安分公司' }
]);

// 角色选项
const roleOptions = ref([
    { value: '1', label: '管理员' },
    { value: '2', label: '普通用户' },
    { value: '3', label: '操作员' }
]);

// 搜索表单
const searchForm = ref({
    organization: '',
    role: '',
    name: ''
});

// 用户列表数据
const userList = ref([
    {
        account: 'admin001',
        name: '张三',
        role: '管理员',
        organization: '陕西煤业集团',
        orgLevel: '集团',
        phone: '13800138000'
    },
    {
        account: 'user002',
        name: '李四',
        role: '普通用户',
        organization: '陕西分公司',
        orgLevel: '省级',
        phone: '13900139000'
    }
]);

// 分页配置
const pagination = ref({
    total: 50,
    pageSize: 10,
    currentPage: 1
});

// 搜索
const handleSearch = () => {
    console.log('搜索条件:', searchForm.value);
};

// 重置搜索表单
const resetForm = () => {
    searchForm.value.organization = '';
    searchForm.value.role = '';
    searchForm.value.name = '';
    console.log('重置搜索条件');
};

// 编辑用户
const handleEdit = (row: any) => {
    console.log('编辑用户:', row);
};

// 每页条数变化
const handleSizeChange = (size: number) => {
    pagination.value.pageSize = size;
    console.log('每页条数:', size);
};

// 页码变化
const handlePageChange = (page: number) => {
    pagination.value.currentPage = page;
    console.log('当前页:', page);
};
</script>

<style lang="scss" scoped>
.role-management {
    :deep(.el-form-item) {
        margin-bottom: 0;

        .el-form-item__label {
            line-height: 0.4rem;
        }
    }

    .header {
        display: flex;
        align-items: center;
        padding: 0.12rem 0.16rem;

        .search-input {
            width: 2rem;
        }
    }

    .cont {
        background: #fff;
        padding: 0 0.16rem 0.24rem;
        min-height: 75vh;
    }
}
</style>
